<template>
    <Panel style="margin:5px;">
        <template slot="header">
            <Form :model="searchModel" class="e-search">
                <div class="e-field-inline">
                    <Label align="left" class="e-label" style="width: auto">用户名:</Label>
                    <TextBox inputId="username" v-model="searchModel.username"></TextBox>
                </div>
                <div class="e-field-inline">
                    <Label align="left" class="e-label" style="width: auto">手机号:</Label>
                    <TextBox inputId="phone" v-model="searchModel.phone"></TextBox>
                </div>
                <div class="e-field-inline">
                    <Label align="left" class="e-label" style="width: auto">状态:</Label>
                    <ComboBox inputId="status" v-model="searchModel.status"
                              :data="convertComboBoxData(configs.status)"></ComboBox>
                </div>
                <div class="e-field-inline" style="width: auto">
                    <LinkButton :disabled="false" @click="submitSearch()" iconCls="icon-search">查询</LinkButton>
                </div>
            </Form>
        </template>

        <Dialog ref="d1" :title="formTitle" :modal="true" :closed="true" :draggable="true" :resizable="true">
            <eForm ref="eForm" :status-label="configs.status" :type-label="configs.type"
                   :model="current" :is-create="isCreate"
                   @addEnd="reload"
            ></eForm>
        </Dialog>

        <Panel :bodyStyle="{padding:'5px'}">
            <LinkButton iconCls="icon-add" :plain="true" @click="openForm(true, '创建管理员',{})">添加</LinkButton>
            <LinkButton iconCls="icon-reload" :plain="true" @click="reload">刷新</LinkButton>
        </Panel>

        <DataGrid :data="data" class="e-table" :dblclickToEdit="true" editMode="cell" @editEnd="editEnd">
            <GridColumn align="center" cellCss="datagrid-td-rownumber" width="30">
                <template slot="body" slot-scope="scope">
                    {{scope.rowIndex + 1}}
                </template>
            </GridColumn>
            <GridColumn field="id" title="用户Id" :sortable="true" width="200"></GridColumn>
            <GridColumn field="phone" title="手机号" :sortable="true"></GridColumn>
            <GridColumn field="username" title="用户名" :sortable="true" :editable="true"
                        :cellCss="editCellCss"></GridColumn>
            <GridColumn field="status" title="状态" :editable="true" :cellCss="editCellCss">
                <template slot="body" slot-scope="scope">
                    {{configs.status[scope.row.status]}}
                </template>
                <template slot="edit" slot-scope="scope">
                    <ComboBox v-model="scope.row.status" :data="convertComboBoxData(configs.status)"></ComboBox>
                </template>
            </GridColumn>
            <GridColumn field="type" title="类型">
                <template slot="body" slot-scope="scope">
                    {{configs.type[scope.row.type]}}
                </template>
                <!--<template slot="edit" slot-scope="scope">
                    <ComboBox v-model="scope.row.type" :data="convertComboBoxData(configs.type)"></ComboBox>
                </template>-->
            </GridColumn>
            <GridColumn field="create_time" title="创建时间" :sortable="true"></GridColumn>
            <GridColumn title="操作">
                <template slot="body" slot-scope="scope">
                    <LinkButton v-if="$user.isSuper()" iconCls="icon-redo" @click="resetPassword(scope.row.id)">重置密码
                    </LinkButton>
                    &nbsp;
                    <LinkButton v-if="scope.row.type!=9" iconCls="icon-remove" @click="del(scope.row)">删除</LinkButton>
                </template>
            </GridColumn>
        </DataGrid>

        <template slot="footer">
            <Pagination :total="total" :pageSize="pagesize" :pageNumber="page" :layout="layout"
                        @pageChange="pageChange($event)"></Pagination>
        </template>
    </Panel>
</template>

<script>
    import {mixinPage} from "@/common/page.mixin"
    import eForm from "./Form"

    export default {
        name: "admins",
        mixins: [mixinPage],
        components: {"eForm": eForm},
        async created() {
            [this.configs] = await this.$e.api.adminConfigs()
            this.search({})
        },
        methods: {
            search(request) {
                this.$e.api.adminList(request).then(res => {
                    [this.data, this.total] = res
                })
            },
            conditions() {
                return [
                    {key: "phone", value: this.searchModel.phone, type: "like"},
                    {key: "username", value: this.searchModel.username, type: "like"},
                    {key: "status", value: this.searchModel.status}
                ]
            },
            submitEdit(request) {
                this.$e.api.adminEdit(request).then(res => {
                    let [, , message] = res
                    this.$toast.center(message)
                })
            },
            submitDelete(request, row) {
                request['data'] = {"user": row['id']}
                this.$e.api.adminDel(request).then(res => {
                    let [, code] = res
                    if (code === 200) {
                        this.search({conditions: this.conditions()})
                    }
                })
            },
            resetPassword(id) {
                this.$messager.prompt({
                    title: "重置密码",
                    msg: "请输入新密码",
                    result: r => {
                        if (r) {
                            this.$e.api.adminResetPassword({id: id, password: r}).then(res => {
                                let [, code] = res
                                if (code === 200) {
                                    this.$toast.center("密码重置成功！")
                                }
                            })
                        }
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>